<template>
  <div class="driverOrder">
    <div class="mycontent">
      <h2>我的订单</h2>
      <div class="box" v-show="state">
        <el-dialog  :visible.sync="dialogFormVisible">
          <h2>接单详情</h2>
          <el-steps :active="active" finish-status="success">
            <el-step title="接单"></el-step>
            <el-step title="到达接车点"></el-step>
            <el-step title="维修"></el-step>
            <el-step title="还车点"></el-step>
            <el-step title="订单完成"></el-step>
          </el-steps>
            <el-button style="margin-top: 1.2rem;" @click="next">下一步</el-button>
        </el-dialog>
      </div>
      <div class="orderNum" v-for="item in myOrder" :key="item.order_id">
        <span style="font-size:1.4rem"  @click="pickSingle(item)">查看进度</span>
        <div><h3>订单类型：{{item.order_type_name}}</h3></div>
        <div>客户备注：{{item.customer_remarks}}</div>
        <div><span class="iconfont icon-shijian1"></span>下单时间:{{item.order_time}}</div>
        <div><span class="iconfont icon-yuandian"></span>接车地点：{{item.car_pickplace}}</div>
      </div>
      <div class="orderNum" v-for="item in myOrder2" :key="item.order_id">
        <span @click="iconBtn(item)" class="iconfont icon-jiantouarrow487"></span>
        <div><h3>订单类型：{{item.order_type_name}}</h3></div>
        <div>客户备注：{{item.customer_remarks}}</div>
        <div><span class="iconfont icon-shijian1"></span>下单时间:{{item.order_time}}</div>
        <div><span class="iconfont icon-yuandian"></span>接车地点：{{item.car_pickplace}}</div>
      </div>
    </div>
    <div>
      <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
        <el-table :data="orderDetail" style="width: 100%">
          <el-table-column prop="customer_name" label="客户姓名" min-width="80" ></el-table-column>
          <el-table-column prop="customer_phone" label="客户电话" width="120"></el-table-column>
          <el-table-column prop="car_picktime" label="接车时间"  min-width="160"></el-table-column>
          <el-table-column prop="car_pickplace" label="接车地址"  min-width="90" ></el-table-column>
          <el-table-column prop="car_alsoplace" label="还车地址"  min-width="90" ></el-table-column>
          <el-table-column prop="stores_name" label="门店名称"  min-width="180"></el-table-column>
        </el-table>
      </el-dialog>
    </div>

  </div>

</template>
<style>
  @import '../../assets/font/yl/iconfont.css';
</style>
<script>
  import * as api from '../../utils/api'
  export default {
    name:'carOrder',
    data() {
      return {
        dialogTableVisible:false,
        dialogFormVisible:false,
        state:false,
        myOrder:[],
        myOrder2:[],
        active: 0,
        orderDetail:[],
        buzhoutiaoData:{},
        chuangNum:''
      };
    },
    created() {
      this.getOrder()
    },
    watch:{
      dialogFormVisible:function () {
        this.getOrder()
      }
    },
    methods: {
      getOrder(){
        this.myOrder=[]
        this.myOrder2=[]
        this.loginData=this.$store.state.msgCount.user
        // console.log(this.loginData.user_id)
        this.axios({
          method:'get',
          url:api.GET_DRIVERORDER,
          params:{userId:this.loginData.user_id}
        }).then(data=>{
          // console.log(data)
          for (let i=0;i<data.data.data.length;i++){
            if (data.data.data[i].order_status_name === '待接单'
                    || data.data.data[i].order_status_name === '已接单'
                    || data.data.data[i].order_status_name === '维修完成'
                    || data.data.data[i].order_status_name === '已到达还车点'
                    || data.data.data[i].order_status_name === '已驳回'
                    || data.data.data[i].order_status_name === '司机到达接车点'){
              this.myOrder.push(data.data.data[i])
            }else{
              this.myOrder2.push(data.data.data[i])
            }
          }
          for (let i=0;i<this.myOrder.length;i++){
            if (this.myOrder[i].order_status_name === '待接单'){
              this.myOrder[i]['zhuangtai']=0
            }else if (this.myOrder[i].order_status_name === '已接单'){
              this.myOrder[i]['zhuangtai']=1
            }else if (this.myOrder[i].order_status_name === '司机到达接车点'){
              this.myOrder[i]['zhuangtai']=2
            }else if (this.myOrder[i].order_status_name === '维修完成'){
              this.myOrder[i]['zhuangtai']=3
            }else if (this.myOrder[i].order_status_name === '已到达还车点'){
              this.myOrder[i]['zhuangtai']=4
            }else if (this.myOrder[i].order_status_name === '已驳回'){
              this.myOrder[i]['zhuangtai']=0
            }

          }
          // console.log(this.myOrder)
          // console.log(this.myOrder2)
          this.orderDetail=data.data.data
        })
      },
     // 步骤条的下一步
      next() {
        this.active++
        this.buzhoutiaoData.zhuangtai++
        // console.log(this.buzhoutiaoData.zhuangtai)
        // if (this.active > 5) this.active = 0;
        // console.log()
        if (this.active === 1){
          this.chuangNum = 4
        }else if (this.active === 2){
          this.chuangNum = 5
        }else if (this.active === 3){
          this.chuangNum = 8
        }else if (this.active === 4){
          this.chuangNum = 6
        }else if (this.active === 5){
          this.chuangNum = 9
        }
        this.axios({
          method: 'post',
          url: api.POST_UPDATEDRIVER,
          data:{
            orderId:this.buzhoutiaoData.order_id,
            orderStatus:this.chuangNum
          }
        }).then(data=>{
          // console.log(data)
        })
      },
      //   点击右边的icon查看详情
      iconBtn(data) {
        this.orderDetail=[]
        // console.log(data)
        this.orderDetail.push(data)
        this.dialogTableVisible = true
      },
      // 点击查看进度的按钮
      pickSingle(data){
        this.state=true
        this.dialogFormVisible=true
        this.buzhoutiaoData = data
        this.active = this.buzhoutiaoData.zhuangtai
      },
    }
  }
</script>

<style scoped lang="less">
  .driverOrder{
    padding: 0;
    width: 70%;
    margin: auto;
    background-color: #F3F4F5;
  }
  .mycontent>h2{
    margin: 0;
    color: #3c3c3c;
    height: 4rem;
    line-height: 7rem;
    font-size:1.8rem;
    text-align: center;
    padding: 0;
  }
  .orderNum>div:nth-of-type(1)>h3{
    color: #131313;
    font-size: 1.4rem;
    font-weight: normal;
    position: absolute;
    top: 0.6rem;
  }
  .mycontent{
    text-align: left;
    border: 1px solid #F3F4F5 ;
  }
  .box{
    position: relative;
  }
  .el-dialog__body>h2{
    position: absolute;
    top: 1rem;
    left: 28rem;
  }
  .orderNum{
    background-color: white;
    position: relative;
    margin: 2rem;
  }
  .orderNum div{
    height: 3rem;
    font-size:1.2rem;
    color: #666666;
    padding-left: 1rem;
  }
  .orderNum>span:nth-of-type(1)> {
    position: absolute;
    right: 1.0rem;
    top: 3.5rem;
    color: black;
    height:5rem;
    width: 6rem;
    line-height: 5rem;
    text-align: center;
  }
 .icon-yuandian:before{
    font-size: 3rem;
    color: #44BEA3;
    position: absolute;
    left: -1.8rem;
    display: inline-block;
  }
  .orderNum>div:nth-of-type(4){
    position: relative;
    left: 1rem;
  }
  .orderNum>div:nth-of-type(4)>span:nth-of-type(1){
    position: absolute;
    left: 0.6rem;
    top: -1rem;
  }
  .el-button .el-button--default{
    text-align: right;
  }
</style>